<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
     <!-- 第一步引入 -->
     <script src="./js/echarts.min.js"></script>
     <style>
         .box{
             width: 600px;
             height: 600px;
             background-color: pink;
         }
     </style>
 </head>
 <body>
     <!-- 第二部创建DOM元素 -->
     <div class="box"></div>
     <script>
         // 第三部获取对象
         var myChart = echarts.init(document.querySelector('.box'));
         // 第四部设置
         var option = {
     legend: {
         top: 'bottom'
     },
     toolbox: {
         show: true,
         feature: {
             mark: {show: true},
             dataView: {show: true, readOnly: false},
             restore: {show: true},
             saveAsImage: {show: true}
         }
     },
     series: [
         {
             name: '面积模式',
             type: 'pie',
             radius: [50, 250],
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: {
                 borderRadius: 8
             },
             data: [
                 {value: 40, name: 'rose 1'},
                 {value: 38, name: 'rose 2'},
                 {value: 32, name: 'rose 3'},
                 {value: 30, name: 'rose 4'},
                 {value: 28, name: 'rose 5'},
                 {value: 26, name: 'rose 6'},
                 {value: 22, name: 'rose 7'},
                 {value: 18, name: 'rose 8'}
             ]
         }
     ]
 };
 
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
     </script>
    
</body>
</html>